<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
	<title>数据展示页面</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="description" content="OneTech shop project">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="/styles/bootstrap4/bootstrap.min.css">
	<link href="/plugins/fontawesome-free-5.0.1/css/fontawesome-all.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" type="text/css" href="/styles/cart_styles.css">
	<link rel="stylesheet" type="text/css" href="/styles/cart_responsive.css">
	<!-- 引入 Bootstrap 美化界面-->
	<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>
<!-- head-->
<header class="header">

	<!-- Top Bar -->

	<div class="top_bar">
		<div class="container">
			<div class="row">
				<div class="col d-flex flex-row">
					<div class="top_bar_contact_item"><div class="top_bar_icon"><img src="/images/phone.png" alt=""></div>${sessionScope.user.userPhone}</div>
					<div class="top_bar_contact_item"><div class="top_bar_icon"><img src="/images/mail.png" alt=""></div><a href="mailto:fastsales@gmail.com">${sessionScope.user.userEmail}</a></div>
					<div class="top_bar_content ml-auto">
						<div class="top_bar_user">
							<div><a href="">欢迎用户:</a></div>
							<div><img height="50px" width="50px"  border-radius="25px" src="http://localhost:8080/upload/${sessionScope.user.userName}"></div>
							<div><a href="">${sessionScope.user.userName}</a></div>

						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- Header Main -->

	<div class="header_main">
		<div class="container">
			<div class="row">

				<!-- Logo -->
				<div class="col-lg-2 col-sm-3 col-3 order-1">
					<div class="logo_container">
						<div class="logo"><a href="#">传智商城</a></div>
					</div>
				</div>

				<!-- Search -->
				<div class="col-lg-6 col-12 order-lg-2 order-3 text-lg-left text-right">
					<div class="header_search">
						<div class="header_search_content">
							<div class="header_search_form_container">
								<form action="/product/queryProductByName" class="header_search_form clearfix">
									<input type="search" name="productName" required="required" class="header_search_input" placeholder="输入商品名字">
									<div class="custom_dropdown">
										<div class="custom_dropdown_list">
											<span class="custom_dropdown_placeholder clc">所有商品</span>
											<i class="fas fa-chevron-down"></i>
											<ul class="custom_list clc">
												<li><a class="clc" href="#">手机数码</a></li>
												<li><a class="clc" href="#">生活用品</a></li>
											</ul>
										</div>
									</div>
									<button type="submit" class="header_search_button trans_300" value="Submit"><img src="/images/search.png" alt=""></button>
								</form>
							</div>
						</div>
					</div>
				</div>

				<!-- Wishlist -->
				<div class="col-lg-4 col-9 order-lg-3 order-2 text-lg-left text-right">
					<div class="wishlist_cart d-flex flex-row align-items-center justify-content-end">
						<div class="wishlist d-flex flex-row align-items-center justify-content-end">
							<div class="wishlist_icon"><img src="/images/heart.png" alt=""></div>
							<div class="wishlist_content">
								<div class="wishlist_text"><a href="#">Wishlist</a></div>
								<div class="wishlist_count">115</div>
							</div>
						</div>
						<!-- Cart -->
						<div class="cart">
							<div class="cart_container d-flex flex-row align-items-center justify-content-end">
								<div class="cart_icon">
									<img src="/images/cart.png" alt="">
									<div class="cart_count"><span>10</span></div>
								</div>
								<div class="cart_content">
									<div class="cart_text"><a href="/product/toCar">购物车</a></div>
									<div class="cart_price">$85</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- Main Navigation -->

	<nav class="main_nav">
		<div class="container">
			<div class="row">
				<div class="col">

					<div class="main_nav_content d-flex flex-row">

						<!-- Categories Menu -->

						<div class="cat_menu_container">
							<div class="cat_menu_title d-flex flex-row align-items-center justify-content-start">
								<div class="cat_burger"><span></span><span></span><span></span></div>
								<div href="/product/toAllProduct" class="cat_menu_text">商品列表</div>
							</div>

							<ul class="cat_menu">
								<li><a href="/product/toAllProduct">所有商品 <i class="fas fa-chevron-right ml-auto"></i></a></li>
								<li><a href="/product/toAllProduct1?kind=手机数码">手机数码 <i class="fas fa-chevron-right ml-auto"></i></a></li>
								<li><a href="/product/toAllProduct1?kind=衣物服饰">衣物服饰<i class="fas fa-chevron-right"></i></a></li>
								<li><a href="/product/toAllProduct1?kind=运动户外">运动户外<i class="fas fa-chevron-right"></i></a></li>
								<li><a href="/product/toAllProduct1?kind=运动户外">茶酒<i class="fas fa-chevron-right"></i></a></li>
							</ul>
						</div>

						<!-- Main Nav Menu -->

						<div class="main_nav_menu ml-auto">
							<ul class="standard_dropdown main_nav_dropdown">
								<li><a href="/user/toIndex">返回主页<i class="fas fa-chevron-down"></i></a></li>
								<li><a href="/product/toAddProduct">新增商品<i class="fas fa-chevron-down"></i></a></li>
								<li><a href="/user/toRegister">注册<i class="fas fa-chevron-down"></i></a></li>
								<li><a href="/user/toUpdateHead">更改头像<i class="fas fa-chevron-down"></i></a></li>
								<li><a href="contact.html">建议<i class="fas fa-chevron-down"></i></a></li>
							</ul>
						</div>

						<!-- Menu Trigger -->

						<div class="menu_trigger_container ml-auto">
							<div class="menu_trigger d-flex flex-row align-items-center justify-content-end">
								<div class="menu_burger">
									<div class="menu_trigger_text">menu</div>
									<div class="cat_burger menu_burger_inner"><span></span><span></span><span></span></div>
								</div>
							</div>
						</div>

					</div>
				</div>
			</div>
		</div>
	</nav>

	<!-- Menu -->

	<div class="page_menu">
		<div class="container">
			<div class="row">
				<div class="col">

					<div class="page_menu_content">

						<div class="page_menu_search">
							<form action="#">
								<input type="search" required="required" class="page_menu_search_input" placeholder="Search for products...">
							</form>
						</div>
						<ul class="page_menu_nav">
							<li class="page_menu_item has-children">
								<a href="#">Language<i class="fa fa-angle-down"></i></a>
								<ul class="page_menu_selection">
									<li><a href="#">English<i class="fa fa-angle-down"></i></a></li>
									<li><a href="#">Italian<i class="fa fa-angle-down"></i></a></li>
									<li><a href="#">Spanish<i class="fa fa-angle-down"></i></a></li>
									<li><a href="#">Japanese<i class="fa fa-angle-down"></i></a></li>
								</ul>
							</li>
							<li class="page_menu_item has-children">
								<a href="#">Currency<i class="fa fa-angle-down"></i></a>
								<ul class="page_menu_selection">
									<li><a href="#">US Dollar<i class="fa fa-angle-down"></i></a></li>
									<li><a href="#">EUR Euro<i class="fa fa-angle-down"></i></a></li>
									<li><a href="#">GBP British Pound<i class="fa fa-angle-down"></i></a></li>
									<li><a href="#">JPY Japanese Yen<i class="fa fa-angle-down"></i></a></li>
								</ul>
							</li>
							<li class="page_menu_item">
								<a href="#">Home<i class="fa fa-angle-down"></i></a>
							</li>
							<li class="page_menu_item has-children">
								<a href="#">Super Deals<i class="fa fa-angle-down"></i></a>
								<ul class="page_menu_selection">
									<li><a href="#">Super Deals<i class="fa fa-angle-down"></i></a></li>
									<li class="page_menu_item has-children">
										<a href="#">Menu Item<i class="fa fa-angle-down"></i></a>
										<ul class="page_menu_selection">
											<li><a href="#">Menu Item<i class="fa fa-angle-down"></i></a></li>
											<li><a href="#">Menu Item<i class="fa fa-angle-down"></i></a></li>
											<li><a href="#">Menu Item<i class="fa fa-angle-down"></i></a></li>
											<li><a href="#">Menu Item<i class="fa fa-angle-down"></i></a></li>
										</ul>
									</li>
									<li><a href="#">Menu Item<i class="fa fa-angle-down"></i></a></li>
									<li><a href="#">Menu Item<i class="fa fa-angle-down"></i></a></li>
									<li><a href="#">Menu Item<i class="fa fa-angle-down"></i></a></li>
								</ul>
							</li>
							<li class="page_menu_item has-children">
								<a href="#">Featured Brands<i class="fa fa-angle-down"></i></a>
								<ul class="page_menu_selection">
									<li><a href="#">Featured Brands<i class="fa fa-angle-down"></i></a></li>
									<li><a href="#">Menu Item<i class="fa fa-angle-down"></i></a></li>
									<li><a href="#">Menu Item<i class="fa fa-angle-down"></i></a></li>
									<li><a href="#">Menu Item<i class="fa fa-angle-down"></i></a></li>
								</ul>
							</li>
							<li class="page_menu_item has-children">
								<a href="#">Trending Styles<i class="fa fa-angle-down"></i></a>
								<ul class="page_menu_selection">
									<li><a href="#">Trending Styles<i class="fa fa-angle-down"></i></a></li>
									<li><a href="#">Menu Item<i class="fa fa-angle-down"></i></a></li>
									<li><a href="#">Menu Item<i class="fa fa-angle-down"></i></a></li>
									<li><a href="#">Menu Item<i class="fa fa-angle-down"></i></a></li>
								</ul>
							</li>
							<li class="page_menu_item"><a href="blog.html">blog<i class="fa fa-angle-down"></i></a></li>
							<li class="page_menu_item"><a href="contact.html">contact<i class="fa fa-angle-down"></i></a></li>
						</ul>

						<div class="menu_contact">
							<div class="menu_contact_item"><div class="menu_contact_icon"><img src="/images/phone_white.png" alt=""></div>+38 068 005 3570</div>
							<div class="menu_contact_item"><div class="menu_contact_icon"><img src="/images/mail_white.png" alt=""></div><a href="mailto:fastsales@gmail.com">fastsales@gmail.com</a></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

</header>
<!--Car-->
<div class="cart_section">
	<div class="container">
		<div class="row">
			<div class="col-lg-10 offset-lg-1">
				<div class="cart_container">
					<div class="cart_title">购物车</div>
					<div class="cart_items">
						<ul class="cart_list">
							<c:forEach var="product" items="${sessionScope.carList}">
								<li class="cart_item clearfix">
									<div class="cart_item_image"><img src="http://localhost:8080/upload/${product.productName}" alt=""></div>
									<div class="cart_item_info d-flex flex-md-row flex-column justify-content-between">
										<div class="cart_item_name cart_info_col">
											<div class="cart_item_title">商品名字</div>
											<div class="cart_item_text">${product.productName}</div>
										</div>
										<div class="cart_item_name cart_info_col">
											<div class="cart_item_title">商品种类</div>
											<div class="cart_item_text">${product.kind}</div>
										</div>
										<div class="cart_item_price cart_info_col">
											<div class="cart_item_title">商品价格(元)</div>
											<div class="cart_item_text">${product.productCounts}</div>
										</div>
										<div class="cart_item_total cart_info_col">
											<a href="/product/clearCar?name=${product.productName}" class="cart_item_text" type="button" style="width:100px;height:40px;border-radius:10%;background-color: #0d82d3;color: white" >移出购物车</a>
										</div>

									</div>
								</li>
							</c:forEach>
						</ul>
					</div>
					<!-- Order Total -->
					<div class="order_total">
						<div class="order_total_content text-md-right">
							<div class="order_total_title">总价格(元):</div>
							<div class="order_total_amount">${sessionScope.totalprice}</div>
						</div>
					</div>
					<div class="cart_buttons">
						<a href="/product/clearAllCar" type="button" class="button cart_button_checkout">清空购物车</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- Newsletter -->

<div class="newsletter">
	<div class="container">
		<div class="row">
			<div class="col">
				<div class="newsletter_container d-flex flex-lg-row flex-column align-items-lg-center align-items-center justify-content-lg-start justify-content-center">
					<div class="newsletter_title_container">
						<div class="newsletter_icon"><img src="/images/send.png" alt=""></div>
						<div class="newsletter_title">Sign up for Newsletter</div>
						<div class="newsletter_text"><p>...and receive %20 coupon for first shopping.</p></div>
					</div>
					<div class="newsletter_content clearfix">
						<form action="#" class="newsletter_form">
							<input type="email" class="newsletter_input" required="required" placeholder="Enter your email address">
							<button class="newsletter_button">Subscribe</button>
						</form>
						<div class="newsletter_unsubscribe_link"><a href="#">unsubscribe</a></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- Footer -->

<footer class="footer">
	<div class="container">
		<div class="row">

			<div class="col-lg-3 footer_col">
				<div class="footer_column footer_contact">
					<div class="logo_container">
						<div class="logo"><a href="#">OneTech</a></div>
					</div>
					<div class="footer_title">Got Question? Call Us 24/7</div>
					<div class="footer_phone">+38 068 005 3570</div>
					<div class="footer_contact_text">
						<p>17 Princess Road, London</p>
						<p>Grester London NW18JR, UK</p>
					</div>
					<div class="footer_social">
						<ul>
							<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
							<li><a href="#"><i class="fab fa-twitter"></i></a></li>
							<li><a href="#"><i class="fab fa-youtube"></i></a></li>
							<li><a href="#"><i class="fab fa-google"></i></a></li>
							<li><a href="#"><i class="fab fa-vimeo-v"></i></a></li>
						</ul>
					</div>
				</div>
			</div>

			<div class="col-lg-2 offset-lg-2">
				<div class="footer_column">
					<div class="footer_title">Find it Fast</div>
					<ul class="footer_list">
						<li><a href="#">Computers & Laptops</a></li>
						<li><a href="#">Cameras & Photos</a></li>
						<li><a href="#">Hardware</a></li>
						<li><a href="#">Smartphones & Tablets</a></li>
						<li><a href="#">TV & Audio</a></li>
					</ul>
					<div class="footer_subtitle">Gadgets</div>
					<ul class="footer_list">
						<li><a href="#">Car Electronics</a></li>
					</ul>
				</div>
			</div>

			<div class="col-lg-2">
				<div class="footer_column">
					<ul class="footer_list footer_list_2">
						<li><a href="#">Video Games & Consoles</a></li>
						<li><a href="#">Accessories</a></li>
						<li><a href="#">Cameras & Photos</a></li>
						<li><a href="#">Hardware</a></li>
						<li><a href="#">Computers & Laptops</a></li>
					</ul>
				</div>
			</div>

			<div class="col-lg-2">
				<div class="footer_column">
					<div class="footer_title">Customer Care</div>
					<ul class="footer_list">
						<li><a href="#">My Account</a></li>
						<li><a href="#">Order Tracking</a></li>
						<li><a href="#">Wish List</a></li>
						<li><a href="#">Customer Services</a></li>
						<li><a href="#">Returns / Exchange</a></li>
						<li><a href="#">FAQs</a></li>
						<li><a href="#">Product Support</a></li>
					</ul>
				</div>
			</div>

		</div>
	</div>
</footer>

<!-- Copyright -->

<div class="copyright">
	<div class="container">
		<div class="row">
			<div class="col">

				<div class="copyright_container d-flex flex-sm-row flex-column align-items-center justify-content-start">
					<div class="copyright_content"><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
						Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
						<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
					</div>
					<div class="logos ml-sm-auto">
						<ul class="logos_list">
							<li><a href="#"><img src="/images/logos_1.png" alt=""></a></li>
							<li><a href="#"><img src="/images/logos_2.png" alt=""></a></li>
							<li><a href="#"><img src="/images/logos_3.png" alt=""></a></li>
							<li><a href="#"><img src="/images/logos_4.png" alt=""></a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/styles/bootstrap4/popper.js"></script>
<script src="/styles/bootstrap4/bootstrap.min.js"></script>
<script src="/plugins/greensock/TweenMax.min.js"></script>
<script src="/plugins/greensock/TimelineMax.min.js"></script>
<script src="/plugins/scrollmagic/ScrollMagic.min.js"></script>
<script src="/plugins/greensock/animation.gsap.min.js"></script>
<script src="/plugins/greensock/ScrollToPlugin.min.js"></script>
<script src="/plugins/easing/easing.js"></script>
<script src="/js/cart_custom.js"></script>
</body>
</html>